import React, {Component} from 'react';
import {Table, Input, InputNumber, TimePicker, message,} from 'antd';
import moment from 'moment';
import "./BottomPartOfTheForm.css"

class BottomPartOfTheForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Data: [[[], [], [], [], ''], [[], [], [], [], ''], [[], [], [], [], '']],
            weightAverage: []//平均立升重
        }
    }

    /**
     * 表格数据提交到后台
     */
    /**初始化**/
    componentWillMount() {
        this.setState({
            Data: this.props.bottomData,
            timeChose: this.props.timeChose
        });
    }

    /**更新props**/
    componentWillReceiveProps(nextProps) {
        this.setState({
            Data: nextProps.bottomData,
            timeChose: nextProps.timeChose
        });
        this.updateAverage();
    }

    /****/
    updateAverage = () => {
        for (let i = 0; i <= 2; i++) {
            const data = this.state.Data[i];
            if (!isNaN(data[2][0]) && !isNaN(data[2][1]) && data[2][0] != null && data[2][1] != null) {
                const weightAverage = this.state.weightAverage;
                weightAverage[i] = ((data[2][0] + data[2][1]) / 2).toFixed(1);
                this.setState({
                    weightAverage: weightAverage,
                })
            }
        }
    };

    postToHome() {
        const shuju = JSON.stringify(this.state.Data[this.state.timeChose]);
        const jsonData = {
            "data": [
                {
                    "riqi": this.props.riqi,
                    "xiaoshi": this.state.timeChose,
                    "leixing": "KZS",
                    "zhonglei": 2,
                    "shuju": shuju,
                    "name": this.props.person,
                }
            ]
        };
        fetch("/api/HuaYS/save", {
            method: 'POST',
            body: JSON.stringify(jsonData), // data can be `string` or {object}!
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0) {
                    message.info('提交成功');
                }
            })
            .catch(error => console.error('Error:', error))
    }


    /**
     * 表格数据提交给父组件
     */
    componentDidMount() {
        //绑定ref
        this.props.onRef(this);
    }

    /**
     * 磨工输入监听
     */
    handleInputChange1(event, index) {
        const newData = this.state.Data;
        newData[this.state.timeChose][0][index] = event.target.value;
        this.setState({
            Data: newData
        });
    }

    /**
     *材料输入监听
     */
    handleInputChange2(event, index) {
        const newData = this.state.Data;
        newData[this.state.timeChose][1][index] = event;
        this.setState({
            Data: newData
        });
    }

    /**
     * 立升重输入监听
     */
    handleInputChange3(event, index) {
        const newData = this.state.Data;
        const timeChose = this.state.timeChose;
        newData[timeChose][2][index] = event;
        const weightAverage = this.state.weightAverage;
        weightAverage[timeChose] = null;
        if (!isNaN(newData[timeChose][2][0]) && !isNaN(newData[timeChose][2][1])) {
            weightAverage[timeChose] = ((newData[timeChose][2][0] + newData[timeChose][2][1]) / 2).toFixed(1);
            this.setState({
                weightAverage: weightAverage,
                Data: newData
            })
        }
        else
            this.setState({
                Data: newData
            });
    }

    /**
     *右边三格的输入监听
     */
    handleInputChange4(event, index) {
        const newData = this.state.Data;
        newData[this.state.timeChose][3][index] = event;
        this.setState({
            Data: newData
        });
    }

    /**
     *备注输入监听
     */
    handleInputChange5(event) {
        let newData = this.state.Data;
        newData[this.state.timeChose][4] = event.target.value;
        this.setState({
            Data: newData
        });
    }

    render() {
        const columns = [
            {
                title: '1',
                width: '10%',
                key: '1',
                dataIndex: '1',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {
                        obj.props.rowSpan = 2;
                    }
                    if (index === 1) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 2) {
                        obj.props.rowSpan = 2;
                    }
                    if (index === 3) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '2',
                width: '11.25%',
                key: '2',
                dataIndex: '2',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {
                        obj.props.rowSpan = 2;
                        obj.props.colSpan = 2;
                    }
                    if (index === 1) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 2) {
                        obj.props.rowSpan = 2;
                        obj.props.colSpan = 2;

                    }
                    if (index === 3) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '3',
                width: '11.25%',
                key: '3',
                dataIndex: '3',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0 || index === 1
                        || index === 2 || index === 3
                    ) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '4',
                width: '7.5%',
                key: '4',
                dataIndex: '4',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0 || index === 2) {
                        obj.props.rowSpan = 2;
                    }
                    if (index === 1 || index === 3) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 4 || index === 5) {
                        obj.props.colSpan = 2;
                    }
                    return obj;
                },
            }, {
                title: '5',
                width: '15%',
                key: '5',
                dataIndex: '5',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0 || index === 2) {
                        obj.props.rowSpan = 2;
                    }
                    if (index === 1 || index === 3
                        || index === 4 || index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '6',
                width: '7.5%',
                key: '6',
                dataIndex: '6'
            }, {
                title: '7',
                width: '7.5%',
                key: '7',
                dataIndex: '7'
            }, {
                title: '8',
                width: '7.5%',
                key: '8',
                dataIndex: '8'
            }, {
                title: '9',
                width: '7.5%',
                key: '9',
                dataIndex: '9',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 3) {
                        obj.props.rowSpan = 3;
                        obj.props.colSpan = 2;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '10',
                width: '15%',
                key: '10',
                dataIndex: '10',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 3) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }
        ];

        /**限制输入数值位数的函数**start**/
        const limitDecimals = (value: string | number): string => {
            const reg = /^(\-)*(\d+)\.(\d\d).*$/;
            if (typeof value === 'string') {
                return !isNaN(Number(value)) ? value.replace(reg, '$1$2.$3') : ''
            } else if (typeof value === 'number') {
                return !isNaN(value) ? String(value).replace(reg, '$1$2.$3') : ''
            } else {
                return ''
            }
        };
        /**限制输入数值位数的函数**end**/

        const {TextArea} = Input;
        const Data = this.state.Data[this.state.timeChose];
        const dataSource = [
            {
                1: '生料磨工',
                2: <TextArea rows={3} value={Data[0][0]}
                             onChange={event => this.handleInputChange1(event, 0)}
                             style={{
                                 resize: "none"
                             }}
                />,
                4: '磨煤工',
                5: <TextArea rows={3} value={Data[0][1]}
                             onChange={event => this.handleInputChange1(event, 1)}
                             style={{
                                 resize: "none"
                             }}
                />,
                6: '项目',
                7: '水分',
                8: '粒度',
                9: '水筛修正系数C',
                10: <InputNumber
                    value={Data[3][0]}
                    step={0.1}
                    min={0}
                    max={100}
                    style={{width: 'auto'}}
                    formatter={limitDecimals}//限制输入数值位数
                    parser={limitDecimals}//限制输入数值位数
                    onChange={event => this.handleInputChange4(event, 0)}/>
            }, {
                6: '石灰石',
                7: <InputNumber value={Data[1][0]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 0)}/>,
                8: <InputNumber value={Data[1][1]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 1)}/>,
                9: '煤筛',
                10: <InputNumber value={Data[3][1]}
                                 step={0.1}
                                 min={0}
                                 max={100}
                                 style={{width: 'auto'}}
                                 formatter={limitDecimals}//限制输入数值位数
                                 parser={limitDecimals}//限制输入数值位数
                                 onChange={event => this.handleInputChange4(event, 1)}/>
            }, {
                1: '生料班长',
                2: <TextArea rows={3} value={Data[0][2]}
                             onChange={event => this.handleInputChange1(event, 2)}
                             style={{
                                 resize: "none"
                             }}
                />,
                4: '磨煤班长',
                5: <TextArea rows={3} value={Data[0][3]}
                             onChange={event => this.handleInputChange1(event, 3)}
                             style={{
                                 resize: "none"
                             }}
                />,
                6: '硅石',
                7: <InputNumber value={Data[1][2]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 2)}/>,
                8: <InputNumber value={Data[1][3]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 3)}/>,
                9: '外卖',
                10: <InputNumber value={Data[3][2]}
                                 style={{width: 'auto'}}
                                 formatter={limitDecimals}//限制输入数值位数
                                 parser={limitDecimals}//限制输入数值位数
                                 step={0.1} onChange={event => this.handleInputChange4(event, 2)}/>
            }, {
                6: '铁粉',
                7: <InputNumber value={Data[1][4]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 4)}/>,
                8: <InputNumber value={Data[1][5]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 5)}/>,
                9: <span>
                    备注：
                    <TextArea value={Data[4]} rows={5}
                              defaultValue={'备注：'} onChange={event => this.handleInputChange5(event)}
                              style={{
                                  resize: "none"
                              }}
                    />
                    </span>
            }, {
                1: '时间',
                2: this.state.timeChose * 8,
                3: this.state.timeChose * 8 + 7,
                4: '平均',
                6: '粉煤灰',
                7: <InputNumber value={Data[1][6]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 6)}/>,
                8: <InputNumber value={Data[1][7]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 7)}/>
            }, {
                1: '立升重g/l',
                2: <InputNumber value={Data[2][0]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange3(event, 0)}/>,
                3: <InputNumber value={Data[2][1]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange3(event, 1)}/>,
                4: this.state.weightAverage[this.state.timeChose],
                6: '烟煤',
                7: <InputNumber value={Data[1][8]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 8)}/>,
                8: <InputNumber value={Data[1][9]}
                                formatter={limitDecimals}//限制输入数值位数
                                parser={limitDecimals}//限制输入数值位数
                                onChange={event => this.handleInputChange2(event, 9)}/>
            }
        ];

        return (
            <div className="KZSbottom">
                <Table className="KZSbottom_table" dataSource={dataSource} bordered columns={columns} pagination={false}
                       showHeader={false}/>
            </div>
        );
    }

}

export default BottomPartOfTheForm;
